<template>
  <div class="login">
    <div style="display: flex; justify-content: flex-end">
      <el-button type="primary" size="mini" @click="add()">新增</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="id" label="序号" width="140"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="date" label="创建时间"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="del(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button @click="update(scope.row)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      width="30%"
      @close="resetForm('ruleForm')"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone" type="tel"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="date">
          <el-date-picker
            style="width: 100%"
            v-model="ruleForm.date"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "LoginView",
  data() {
    return {
      title: "新增用户",
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      id: "",
      ruleForm: {
        name: "",
        phone: "",
        address: "",
        date: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        date: [{ required: true, message: "请选择日期", trigger: "change" }],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    add() {
      this.ruleForm.name = "";
      this.ruleForm.phone = "";
      this.ruleForm.address = "";
      this.ruleForm.date = "";
      this.dialogVisible = true;
    },
    del(row) {
      axios.post("mock/deleteUser", row).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.message,
            type: "success",
          });
          this.getList();
        }
      });
    },
    update(row) {
      this.title = "更新用户";
      this.dialogVisible = true;
      this.ruleForm.name = row.name;
      this.ruleForm.phone = row.phone;
      this.ruleForm.address = row.address;
      this.ruleForm.date = row.date;
      this.id = row.id;
    },
    handleCurrentChange() {
      console.log(this.currentPage);
      this.getList();
    },
    getList() {
      axios
        .get("mock/userList", {
          params: { currentPage: this.currentPage, pageSize: this.pageSize },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.total = res.data.totalPage;
            this.$message({
              message: res.data.message,
              type: "success",
            });
          }
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "更新用户") {
            let data = { id: this.id, ...this.ruleForm };
            axios.post("mock/editUser", data).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.message,
                  type: "success",
                });
                this.getList();
              }
            });
            this.dialogVisible = false;
            return;
          }
          axios.post("mock/addUser", this.ruleForm).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.message,
                type: "success",
              });
              this.dialogVisible = false;
              this.getList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>
